<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="(item, index) in tab" :key="index" :label="item" :name="item">
      </el-tab-pane>
    </el-tabs>
    <div>
      <Search/>
    </div>
    <div class="main">
      <Content1/>
    </div>
    <div class="cut_page">
      <Page/>
    </div>
  </div>
</template>

<script>
import Search from "@/components/Order/order_search";
import Content1 from "@/components/Order/order_list";
import Page from "@/components/Order/cut_page";
import {createNamespacedHelpers} from "vuex";

const {mapActions} = createNamespacedHelpers("order");
export default {
  created() {
    //渲染默认数据
    // console.log(this.$store.state)
    this.set_order(this.activeName);
  },
  mounted() {
  },
  components: {
    Search,
    Content1,
    Page,
  },
  data() {
    return {
      tab: [
        "近三个月订单",
        "等待买家付款",//状态 0
        "买家已付款",  //1
        "申请退款",    //2
        "退款中",     //3
        "已关闭订单"  //4
      ],
      activeName: "近三个月订单",
    };
  },
  methods: {
    ...mapActions(["set_page", "set_order", "select_tabNav"]),
    // ...mapMutations(["set_tabNav"]),
    //tab切换
    handleClick() {
      this.set_order(this.activeName);
      this.select_tabNav(this.activeName);
      this.set_page(1); //每次切换 从第一页开始
    },
  },
  computed: {},
};
</script>

<style scoped>
.app-container {
  min-width: 1050px;
  margin: 0 auto;
}
.box {
  width: 94%;
  margin: 0 auto;
}

.main {
  margin: 20px 0;
  height: 60vh;
  overflow: auto;
}
</style>
